<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box .item {
            width: 1000px;
            display: flex;
            margin: 0 auto;
            border-bottom: 1px solid #000;
            justify-content: space-between;
        }

        .item p {
            width: 300px;
            margin-top: 10px;


        }
    </style>
</head>

<body>

    <h2>留言列表</h2>
    <div class="box">
        <!-- <div>
            <p></p>
            <p></p>
            <button>删除</button>
        </div> -->
    </div>

    <script>

        console.log(localStorage.getItem("token"));


        function getList() {
            let xhr = new XMLHttpRequest();
            xhr.open("get", "http://wish.byesame.com/wish?page=1&rows=10")
            xhr.setRequestHeader("token", localStorage.getItem("token"))
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    let data = JSON.parse(xhr.responseText)
                    console.log(data);
                    if (data.code == 200) {
                        let list = data.data.list;
                        document.querySelector(".box").innerHTML = ""; //删除box 中所有节点 添加之前先清空
                        // 真正的删除不是我们去删除具体的节点 而是 发送要删除的id 给后端 然后获取最新的列表即可
                        for (let i = 0; i < list.length; i++) {
                            let div = document.createElement("div")
                            let p1 = document.createElement("p")
                            let p2 = document.createElement("p")
                            let btn = document.createElement("button")
                            btn.setAttribute("data-id",list[i].id) //将每次遍历到的id 绑定在按钮的自定义属性身上
                            btn.onclick = deleteFun
                            p1.innerText = list[i].name;
                            p2.innerText = list[i].content;
                            btn.innerText = "删除";
                            div.appendChild(p1)
                            div.appendChild(p2)
                            div.appendChild(btn)
                            div.className = "item";
                            document.querySelector(".box").appendChild(div);

                        }

                    } else {
                        //错误提示
                    }
                }
            }
        }
        getList()
        // 删除方法
        function deleteFun() {
            let id = this.getAttribute("data-id")

            let xhr = new XMLHttpRequest();
            xhr.open("delete", "http://wish.byesame.com/wish")
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xhr.setRequestHeader("token", localStorage.getItem("token"))
            xhr.send("id="+id);
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    let d = JSON.parse(xhr.responseText)
                    console.log(d);
                    if(d.code == 200){
                        console.log("删除成功");
                        getList(); //重新调用接口 为了获取最新数据 根据最新数据 渲染节点 来更新列表的功能 也就是删除
                    }
                 }
            }
        }

        // 分页显示 10个按钮 （如果数据大于 100 就显示10按钮） 如果数据小于100 要显示对应数量的按钮数据 如 89 9个按钮 82数据 9个
        // 新增
    </script>

</body>

</html>